<template>
	<div :style="{ backgroundColor: dominantColor }">
		<!-- <img ref="image" :src="imageUrl" style="display: block; width: 100%" /> -->
		<div v-if="dominantColor">Dominant Color: {{ dominantColor }}</div>
	</div>
</template>

<script>
import convert from 'color-convert';
import ColorThief from 'color-thief-browser';
import { mapGetters, mapActions } from 'vuex';
import { attachDownload } from '@/api/global';
export default {
	data() {
		return {
			imageUrl: '',
			dominantColor: ''
		};
	},
	computed: { ...mapGetters(['siteInfo']) },
	async mounted() {
		this.imageUrl = window.staticPath + (await this.getFileUrl(this.siteInfo.field1));
		/* let img = new Image();
		img.src = window.staticPath + (await this.getFileUrl(this.siteInfo.field1));
		if (img.complete) {
			let imgEle = window.createElement('img');
			imgEle.src = 
			console.log(img.width);
		} */
		this.$nextTick(() => {
			this.getDominantColor();
		});
	},
	methods: {
		...mapActions(['getFileUrl']),
		async getDominantColor() {
			try {
				let img = new Image();
				let colorThief = new ColorThief();
				let imgBlob = await attachDownload(this.siteInfo.field1).then((res) => res.data);
				let objectURL = window.URL.createObjectURL(imgBlob);
				img.src = objectURL;
				img.addEventListener('load', async () => {
					let color = await colorThief.getColor(img);
					console.log(color);
				});
				console.log(imgBlob);
				/* if(imgElement.complete){
					console.log(imgElement);
					console.log(await colorThief.getColor(imgElement));
				} */
				/* console.log();
				console.log(imgElement);
				imgElement.addEventListener('load', async () => {
					let color = await colorThief.getColor(imgElement);
					console.log(color.join());
					this.dominantColor = `rgb(${color.join()})`;
					console.log(convert.rgb.hex(color));
				}); */
			} catch (error) {
				console.error('Error getting dominant color:', error);
			}
		}
	}
};
</script>

<style scoped></style>
